<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        padding: 100px;
      }
    </style>
  </head>

  <body>
    <button id="btn1">我是按钮1</button>
    <button id="btn2">我是按钮2</button>
    <script>
      //第三种：DOM2模型
      var button1 = document.getElementById('btn1');
      var button2 = document.getElementById('btn2');
      // 添加
      //指定事件名，不需要加 "on" 前缀
      button1.addEventListener('click', function () {
        console.log('DOM2模型-1');
      });
      button1.addEventListener('click', function () {
        console.log('DOM2模型-2');
      });
      button1.addEventListener('click', function () {
        console.log('DOM2模型-3');
      });
      // 移出
      //如果要移除事件函数，addEventListener() 的执行函数必须使用非匿名函数
      //匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。
      button1.addEventListener('click', tell);
      function tell() {
        console.log('DOM2模型-4');
      }
      button1.removeEventListener('click', tell);

      // 1、
      // 自定义事件，使用 Event 构造函数：
      var event = new Event('build');
      // 监听事件
      button1.addEventListener( //btn1监听event事件
        'build',
        function (e) {
          console.log('第一个按钮监听到了分发的事件');
        },
        false
      );
      // 触发自定义事件
      button2.onclick = function () {
        button1.dispatchEvent(event); //点击btn2,btn1分发事件event
      };
      // 输出：第一个按钮监听到了分发的事件


      // 2、
      // 自定义事件，使用 Event 构造函数：
      var event = new Event('build');
      // 监听事件
      button1.addEventListener( //btn1监听event事件
        'build',
        function (e) {
          console.log('第一个按钮监听到了分发的事件');
        },
        false
      );
      // 触发自定义事件
      button2.onclick = function () {
        button2.dispatchEvent(event); //点击btn2,btn2分发事件event
      };
      //关于事件流的扩展 //btn1的父节点添加事件event监听
      button1.parentElement.addEventListener(
        "build",
        function(){
          console.log("第一个按钮监的父节点监听到了分发的事件");
        },
        true//若为true则是在捕获阶段响应，若为false在冒泡阶段响应
      )
      // btn1添加监听事件 btn1的父节点添加事件监听 btn2分发这个事件
      // btn2会进行事件传递 只能顺着结构 btn1的父节点实现监听
      // 输出：第一个按钮监的父节点监听到了分发的事件
    </script>
  </body>
</html>
